// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React from 'react';
import cn from 'classnames';
import { useRequest, defaultFormatResult } from '@/hooks';
import { Spin } from 'antd';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { useInterview, useCompanyName } from '@/pages/RecruitEmail/hooks';
import { InterviewBoxPcB, InterviewResult, InterviewDetail, SubmitWorkPC } from '@/pages/RecruitEmail/pc/components';
import { getJobAndQuestionInfo } from '@/pages/RecruitEmail/service/interview';
import { STATUS } from '@/pages/RecruitEmail/constants';
// import { history } from 'umi'
// import refusePic from '@/pages/RecruitEmail/images/interview-bg-refuse.png';
// import acceptPic from '@/pages/RecruitEmail/images/interview-bg-accept.png';
import initPic from '@/pages/RecruitEmail/images/interview-bg-accept.png';
import topicImg from '@/pages/RecruitEmail/images/homework.png';
// import { pushRoute } from '@/pages/RecruitEmail/utils';
import styles from './index.less';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const InterviewHomeWork = props => {
    const { nid, id } = props;
    const [title, setTitle] = React.useState('');
    const [content, setContent] = React.useState('');

    const [titleIcon, setTitleIcon] = React.useState(null);
    const handleCheck = () => {
        window.open(`/recruitment/register?id=${id}&nid=${nid}`, '_blank');
        // pushRoute({
        //     pathname: '/recruitment/register',
        //     query: {
        //         id,
        //         nid
        //     }
        // });
    };
    const { data: result, loading: questionLoading, run: getJobAndQuestion } = useRequest(
        () => getJobAndQuestionInfo(nid),
        {
            initialData: [],
            ...defaultFormatResult
        }
    );

    React.useEffect(() => {
        if (result?.state !== 2) {
            setTitle('请提交您的面试作业');
            setContent('');
            setTitleIcon(null);
        } else {
            setTitle('已提交面试作业');
            setContent('欢迎加入 微微科技有限公司 ');
            setTitleIcon('accept');
        }
    }, [result]);

    const homeworklist = [
        {
            key: '面试轮次',
            iconType: 'mianshishenqing',
            showIcon: true,
            value: result?.interviewRoundName || '--'
        },
        {
            key: '面试方式',
            iconType: 'mianshifangshi',
            showIcon: true,
            value: '面试作业'
        },
        {
            key: '面试题目',
            imgSrc: topicImg,
            showImg: true,
            value: result?.topicInfo || '--'
        },
        {
            key: '截止时间',
            iconType: 'timeAdjusted',
            showIcon: true,
            value: result?.deadline || '--'
        }
    ];

    const leftRight = () => {
        let show = true;
        if (result) {
            if (result?.state && result?.state !== 2) {
                show = false;
            }
        }

        return show;
    };
    const showLeftRight = React.useMemo(leftRight, [result]);

    const iconColor = () => {
        let color = '#000';
        // 已提交面试作业
        if (result?.state === 2) {
            color = '#44C69D';
        }
        return color;
    };

    const leftView = () => (
        <div
            style={{
                maxWidth: result?.state !== 2 ? 700 : 670,
                margin: '241px auto 227px auto',
                padding: '0 98px',
                boxSizing: 'border-box'
            }}
        >
            <Spin spinning={questionLoading}>
                {result?.state !== 2 ? (
                    <SubmitWorkPC result={result} getJobAndQuestion={getJobAndQuestion} />
                ) : (
                    <InterviewResult type={STATUS.HOMEWORK} style={{ marginTop: 61 }} onClick={handleCheck} />
                )}
            </Spin>
        </div>
    );
    const rightView = () => (
        <div
            style={{
                maxWidth: result?.state !== 2 ? 700 : 670,
                margin: '109px auto 129px auto',

                boxSizing: 'border-box'
            }}
        >
            <Spin spinning={questionLoading}>
                <div className={styles.resultTitle}>面试信息</div>
                <div className={cn(styles.detailCon)} style={{ marginBottom: 40 }}>
                    <InterviewDetail
                        dataSource={homeworklist}
                        keyStyle={{
                            fontWeight: 400,
                            height: '22px',
                            fontSize: '14px',
                            fontFamily: 'PingFangSC-Regular, PingFang SC',
                            color: 'rgba(0,0,0,0.45)',
                            lineHeight: '22px'
                        }}
                        valueStyle={{
                            height: '26px',
                            fontSize: '18px',
                            fontFamily: 'PingFangSC-Regular, PingFang SC',
                            fontWeight: 500,
                            color: 'rgba(0,0,0,0.85)',
                            lineHeight: '26px'
                        }}
                    />
                </div>
            </Spin>
        </div>
    );

    const leftview2 = () => (
        <div
            style={{
                maxWidth: result?.state !== 2 ? 700 : 670,
                margin: '0 auto',
                boxSizing: 'border-box'
            }}
        >
            <Spin spinning={questionLoading}>
                {result?.state !== 2 ? (
                    <SubmitWorkPC result={result} getJobAndQuestion={getJobAndQuestion} />
                ) : (
                    <>
                        <InterviewResult type={STATUS.HOMEWORK} style={{ marginTop: 61 }} onClick={handleCheck} />

                        <div className={cn(styles.detailCon)} style={{ marginBottom: 40 }}>
                            <InterviewDetail
                                dataSource={homeworklist}
                                keyStyle={{
                                    fontWeight: 400,
                                    height: '22px',
                                    fontSize: '14px',
                                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                                    color: 'rgba(0,0,0,0.45)',
                                    lineHeight: '22px'
                                }}
                                valueStyle={{
                                    height: '26px',
                                    fontSize: '18px',
                                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                                    fontWeight: 500,
                                    color: 'rgba(0,0,0,0.85)',
                                    lineHeight: '26px'
                                }}
                            />
                        </div>
                    </>
                )}
            </Spin>
        </div>
    );

    return (
        <div className={styles.interviewPc}>
            <InterviewBoxPcB
                titleProps={{
                    src: initPic,
                    // titleAfter: companyName,
                    title,
                    content,

                    picStyle: { marginBottom: 8, marginTop: 22 },
                    iconType: titleIcon,
                    iconStyle: { color: iconColor(), marginRight: 12 }
                }}
                left={showLeftRight ? leftView() : leftview2()}
                right={rightView()}
                showLeftRight={showLeftRight}

                // showTip={showTip()}
                // show={status === STATUS.ACCEPT && data?.registerStatus !== 1}
                // onClick={handleCheck}
            ></InterviewBoxPcB>
        </div>
    );
};
export default InterviewHomeWork;
